<template>
    <div class="home">
        <!-- 总统计/采集数量统计 -->
        <div class="statistics">
            <span class="all-statistics" style="float:left">
                <div>
                    <img src="@/assets/img/统计.png" style="width:16px;height:16px;margin-left:16px;margin-top:15px;float:left;"/>
                    <span style="margin-left:5px;height:48px;line-height:48px">总统计</span>
                </div>
                <hr style='border:0.1px inset #909399;'>
                <div class="collect">
                    <div class="day-collect">
                        <span style="font-size:18px;color:#fff;margin-left:40px;height:77px;line-height:77px">日采集<label style="font-size:14px">数量</label>
                        </span>
                        <span style="float:right;color:#fff;font-size:36px;margin-right:30px;height:77px;line-height:77px">{{collectData.dailyCount}}</span>
                    </div>
                    <div class="week-collect">
                        <span style="font-size:18px;color:#fff;margin-left:40px;height:77px;line-height:77px">周采集<label style="font-size:14px">数量</label>
                        </span>
                        <span style="float:right;color:#fff;font-size:36px;margin-right:30px;height:77px;line-height:77px">{{collectData.weekCount}}</span>
                    </div>
                    <div class="month-collect">
                        <span style="font-size:18px;color:#fff;margin-left:40px;height:77px;line-height:77px">月采集<label style="font-size:14px">数量</label>
                        </span>
                        <span style="float:right;color:#fff;font-size:36px;margin-right:30px;height:77px;line-height:77px">{{collectData.monthCount}}</span>
                    </div>
                    <div class="year-collect">
                        <span style="font-size:18px;color:#fff;margin-left:40px;height:77px;line-height:77px">总采集<label style="font-size:14px">数量</label>
                        </span>
                        <span style="float:right;color:#fff;font-size:36px;margin-right:30px;height:77px;line-height:77px">{{collectData.all}}</span>
                    </div>
                </div>
            </span>
            <span class="volume-statistics" style="float:right">
                <div>
                    <img src="@/assets/img/ztj_icon.png" style="width:16px;height:16px;margin-left:16px;margin-top:15px;float:left;"/>
                    <span style="margin-left:5px;height:48px;line-height:48px">采集数量统计</span>
                    <span style="margin-left:5.1%;">时间：</span>
                    <span>
                        <el-date-picker v-model="startValue" type="date" placeholder="选择开始日期" size="mini" @change="selTime" value-format="yyyy-MM-dd"></el-date-picker> - 
                        <el-date-picker v-model="endValue" type="date" placeholder="选择结束日期" size="mini" @change="selTime"  value-format="yyyy-MM-dd"></el-date-picker>
                    </span>
                </div>
                <hr style='border:0.1px inset #909399;'>
                <div id="mychart-volume" style="flex:1;height:360px;margin: 10px 6px;border:0px solid #eee"></div>
            </span>
        </div>
        <!-- CPI/PPI -->
        <div class="cpi-ppi">
            <span class="cpi" style="float:left">
                <div>
                    <img src="@/assets/img/表格统计.png" style="width:16px;height:16px;margin-left:16px;margin-top:15px;float:left;"/>
                    <span style="margin-left:5px;height:48px;line-height:48px">CPI指数</span>
                    <span style="margin-left:120px">
                        <el-select v-model="cpiValue" placeholder="请选择城市" size="mini" @change="selCpi" style="width:300px">
                            <el-option v-for="item in cpiTypeList" :key="item" :label="item" :value="item">
                                <span style="float: left">{{ item }}</span>
                            </el-option>
                        </el-select>
                    </span>
                </div>
                <hr style='border:0.1px inset #909399;'>
                <div id="mychart-cpi" style="flex:1;height:377px;margin: 10px 6px;border:0px solid #eee"></div>
            </span>
            <span class="ppi" style="float:right">
                <div>
                    <img src="@/assets/img/表格统计.png" style="width:16px;height:16px;margin-left:16px;margin-top:15px;float:left;"/>
                    <span style="margin-left:5px;height:48px;line-height:48px">PPI指数</span>
                    <span style="margin-left:120px">
                        <el-select v-model="ppiValue" placeholder="请选择城市" size="mini" @change="selPpi" style="width:300px">
                            <el-option v-for="item in ppiTypeList" :key="item" :label="item" :value="item">
                                <span style="float: left">{{ item }}</span>
                            </el-option>
                        </el-select>
                    </span>
                </div>
                <hr style='border:0.1px inset #909399;'>
                <div id="mychart-ppi" style="flex:1;height:377px;margin: 10px 6px;border:0px solid #eee"></div>
            </span>
        </div>
        <!-- 平均工资 -->
        <div class="countryWage">
            <span class="countryWageChart" style="float:left">
                <div>
                    <img src="@/assets/img/统计.png" style="width:16px;height:16px;margin-left:16px;margin-top:15px;float:left;"/>
                    <span style="margin-left:5px;height:48px;line-height:48px">平均工资</span>
                    <span style="margin-left:160px">
                        <el-select v-model="countryValue" placeholder="请选择城市" size="mini" @change="selCountry" style="width:300px">
                            <el-option v-for="item in companyTypeList" :key="item" :label="item" :value="item">
                                <span style="float: left">{{ item }}</span>
                            </el-option>
                        </el-select>
                    </span>
                </div>
                <hr style='border:0.1px inset #909399;'>
                <div id="mychart-countryWage" style="flex:1;height:377px;margin: 10px 6px;border:0px solid #eee"></div>
            </span>
        </div>
        <!-- 低保 -->
        <div class="subsistence">
            <span class="subsistenceChart" style="float:left">
                <div>
                    <img src="@/assets/img/统计.png" style="width:16px;height:16px;margin-left:16px;margin-top:15px;float:left;"/>
                    <span style="margin-left:5px;height:48px;line-height:48px">低保</span>
                    <span style="margin-left:160px">
                        <el-select v-model="subsistenceValue" placeholder="请选择城市" size="mini" @change="selSubsistence" style="width:300px">
                            <el-option v-for="item in subsistenceTypeList" :key="item" :label="item" :value="item">
                                <span style="float: left">{{ item }}</span>
                            </el-option>
                        </el-select>
                    </span>
                </div>
                <hr style='border:0.1px inset #909399;'>
                <div id="mychart-subsistence" style="flex:1;height:377px;margin: 10px 6px;border:0px solid #eee"></div>
            </span>
        </div>
        <!-- 数据类型/数据源类型 -->
        <div class="otherType">
            <span class="other1" style="float:left">
                <div>
                    <img src="@/assets/img/采集数据.png" style="width:16px;height:16px;margin-left:16px;margin-top:15px;float:left;"/>
                    <span style="margin-left:5px;height:48px;line-height:48px">数据类型统计</span>
                </div>
                <hr style='border:0.1px inset #909399;'>
                <div id="mychart-other1" style="flex:1;height:377px;margin: 10px 6px;border:0px solid #eee"></div>
            </span>
            <span class="other2" style="float:right">
                <div>
                    <img src="@/assets/img/采集数据.png" style="width:16px;height:16px;margin-left:16px;margin-top:15px;float:left;"/>
                    <span style="margin-left:5px;height:48px;line-height:48px">数据源统计</span>
                </div>
                <hr style='border:0.1px inset #909399;'>
                <div id="mychart-other2" style="flex:1;height:377px;margin: 10px 6px;border:0px solid #eee"></div>
            </span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            collectData: {},
            startValue: '2020-01-01',
            endValue: '2021-01-01',
            volumeDataX: [],
            volumeDataY: [],
            cpiValue: '平均',
            cpiTypeList: ['平均'],
            cpiDataX: [],
            cpiDataY: [],
            ppiValue: '平均',
            ppiTypeList: ['平均'],
            ppiDataX: [],
            ppiDataY: [],
            countryValue: '平均',
            companyTypeList: ['平均'],
            wageDataX: [],
            wageDataY: [], 
            subsistenceValue: '平均',
            subsistenceTypeList: ['平均'],
            subsistenceDataX: [],
            dataCity: [],
            dataVillage: [], 
            other1Data: [],
            other2Data: [],
        }
    },
    methods: {
        // 数据请求
        getData() {
            // 总统计
            this.$api.home.collect().then(res => {
                // console.log(res);
                this.collectData = res.data[0];
            });
            // 采集数量统计
            // console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
            // console.log(this.$api.common.aMonthDateArray())
            this.startValue = this.$api.common.setupAMonthAgoDate() 
            this.endValue = this.$api.common.setupNowDate();
            this.$api.home.volume(this.startValue, this.endValue).then(res => {
                // console.log(res.data.list);
                this.volumeDataX = [];
                this.volumeDataY = [];
                for(let i =0;i<res.data.list.length;i++) {
                    this.volumeDataX.push(res.data.list[i].collectionTime);
                    this.volumeDataY.push(res.data.list[i].count);
                }
                // console.log(this.volumeDataY);
                // 采集数量统计图
                this.$api.echartsPublic.initEchartVolume(this.$echarts.init(document.getElementById("mychart-volume")), this.volumeDataX, this.volumeDataY);
            })
            // CPI 
            this.$api.home.cpiTypeList().then(res => {
                // console.log(res.data.consumerTypeList);
                for(let i =0;i<res.data.consumerTypeList.length;i++) {
                    this.cpiTypeList.push(res.data.consumerTypeList[i].consumer_type);
                }
                // console.log(this.cpiTypeList);
            })
            this.$api.home.cpiQuery().then(res => {
                // console.log(res.data.cpiList);
                this.cpiCommonMethod(res.data.cpiList);
            })
            // PPI
            this.$api.home.ppiTypeList().then(res => {
                // console.log(res);
                for(let i =0;i<res.data.industryTypeList.length;i++) {
                    this.ppiTypeList.push(res.data.industryTypeList[i].industry_type);
                }
                // console.log(this.ppiTypeList);
            })
            this.$api.home.ppiQuery().then(res => {
                // console.log(res);
                this.ppiCommonMethod(res.data.ppiList);
            })
            // 工资 
            this.$api.home.companyTypeList().then(res => {
                // console.log(res);
                for(let i =0;i<res.data.companyTypeList.length;i++) {
                    this.companyTypeList.push(res.data.companyTypeList[i].company_type);
                }
                // console.log(this.companyTypeList);
            })
            this.$api.home.salaryQuery().then(res => {
                // console.log(res);
                this.salaryCommonMethod(res.data.salaryList);
            }) 
            // 低保 
            this.$api.home.regionList().then(res => {
                console.log(res);
                for(let i =0;i<res.data.regionList.length;i++) {
                    this.subsistenceTypeList.push(res.data.regionList[i].region);
                }
                console.log(this.subsistenceTypeList);
            }),
            this.$api.home.subsistenceQuery().then(res => {
                console.log(res);
                this.subsistenceCommonMethod(res.data.subsistenceList);
            }) 
            // 数据类型
            this.$api.home.dataTypeCountList().then(res => {
                console.log(res);
                for(let i =0;i<res.data.dataTypeCountList.length;i++) {
                    this.other1Data.push({
                        value: res.data.dataTypeCountList[i].count,
                        name: res.data.dataTypeCountList[i].dataType,
                    });
                }
                console.log('66666666666666666666666666666666666');
                console.log(this.other1Data);
                
                this.$api.echartsPublic.initEchartOhter1(this.$echarts.init(document.getElementById("mychart-other1")), this.other1Data)
            })
            // 数据源
            this.$api.home.websiteNameCountList().then(res => {
                console.log(res);
                for(let i =0;i<res.data.websiteNameCountList.length;i++) {
                    this.other2Data.push({
                        value: res.data.websiteNameCountList[i].count,
                        name: res.data.websiteNameCountList[i].websiteName,
                    });
                }
                console.log('7777777777777777777777777766666666');
                console.log(this.other2Data);
                
                this.$api.echartsPublic.initEchartOhter2(this.$echarts.init(document.getElementById("mychart-other2")), this.other2Data)
            })
        },
        // 采集数量》时间选择
        selTime() {
            console.log(this.startValue, this.endValue);
            this.$api.home.volume(this.startValue, this.endValue).then(res => {
                console.log(res);
                this.volumeDataX = [];
                this.volumeDataY = [];
                for(let i =0;i<res.data.list.length;i++) {
                    this.volumeDataX.push(res.data.list[i].collectionTime);
                    this.volumeDataY.push(res.data.list[i].count);
                }
                console.log(this.volumeDataY);
                // 采集数量统计图
                this.$api.echartsPublic.initEchartVolume(this.$echarts.init(document.getElementById("mychart-volume")), this.volumeDataX, this.volumeDataY);
            })
        },
        // CPI》cpi类型选择
        selCpi() {
            console.log(this.cpiValue);
            if(this.cpiValue == "平均") {
                this.$api.home.cpiQuery().then(res => {
                    this.cpiCommonMethod(res.data.cpiList);
                })
            } else {
                this.$api.home.cpiConsumerType(this.cpiValue).then(res => {
                    // console.log(res.data.cpiInfo);
                    this.cpiCommonMethod(res.data.cpiInfo);
                })
            }
        },
        // PPI》ppi类型选择
        selPpi() {
            console.log(this.ppiValue);
            if(this.ppiValue == "平均") {
                this.$api.home.ppiQuery().then(res => {
                    this.ppiCommonMethod(res.data.ppiList);
                })
            } else {
                this.$api.home.ppiConsumerType(this.ppiValue).then(res => {
                    // console.log(res);
                    this.ppiCommonMethod(res.data.ppiInfo);
                })
            }
        },
        // 各地工资》类型选择
        selCountry() {
            console.log(this.countryValue);
            if(this.countryValue == "平均") {
                this.$api.home.salaryQuery().then(res => {
                    this.salaryCommonMethod(res.data.salaryList);
                })
            } else {
                this.$api.home.salaryCompanyType(this.countryValue).then(res => {
                    console.log(res);
                    this.salaryCommonMethod(res.data.salaryInfo);
                })
            }
        },
        // 低保》城市选择
        selSubsistence() {
            console.log(this.subsistenceValue);
            if(this.subsistenceValue == "平均") {
                this.$api.home.subsistenceQuery().then(res => {
                    this.subsistenceCommonMethod(res.data.subsistenceList);
                })
            } else {
                this.$api.home.subsistenceInfoByRegion(this.subsistenceValue).then(res => {
                    console.log(res);
                    this.subsistenceCommonMethod(res.data.subsistenceInfo);
                })
            }
        },
        // 公共方法
        cpiCommonMethod(commonData) {
            this.cpiDataX = [];
            this.cpiDataY = [];
            let data = [];
            for(let i =0;i<commonData.length;i++) {
                this.cpiDataX.push(commonData[i].publish_time);
                data.push(commonData[i].cpi);
            }
            this.cpiDataY.push({
                name: this.cpiValue,
                type: 'line',
                stack: '总量',
                data: data
            })
            // console.log(this.cpiDataX);
            // console.log(this.cpiDataY);
            // CPI
            this.$api.echartsPublic.initEchartGPI(this.$echarts.init(document.getElementById("mychart-cpi")),this.cpiDataX,this.cpiDataY)
        },
        ppiCommonMethod(commonData) {
            this.ppiDataX = [];
            this.ppiDataY = [];
            let data = [];
            for(let i =0;i<commonData.length;i++) {
                this.ppiDataX.push(commonData[i].publish_time);
                this.ppiDataY.push(commonData[i].ppi);
            }
            // console.log(this.ppiDataX);
            // console.log(this.ppiDataY);
            // PPI
            this.$api.echartsPublic.initEchartPPI(this.$echarts.init(document.getElementById("mychart-ppi")),this.ppiDataX,this.ppiDataY)
        },
        salaryCommonMethod(commonData) {
            this.wageDataX = [];
            this.wageDataY = [];
            let data = [];
            for(let i =0;i<commonData.length;i++) {
                this.wageDataX.push(commonData[i].publish_time);
                this.wageDataY.push(commonData[i].salary);
            }
            // 工资
            this.$api.echartsPublic.initEchartCountryWage(this.$echarts.init(document.getElementById("mychart-countryWage")),this.wageDataX,this.wageDataY)
        },
        subsistenceCommonMethod(commonData) {
            this.subsistenceDataX = [];
            this.dataCity = []; 
            this.dataVillage = [];  
            let data = [];
            for(let i =0;i<commonData.length;i++) {
                this.subsistenceDataX.push(commonData[i].publish_time);
                this.dataCity.push(commonData[i].city);
                this.dataVillage.push(commonData[i].countryside);
            }
            // 低保
            this.$api.echartsPublic.initEchartSubsistence(this.$echarts.init(document.getElementById("mychart-subsistence")),this.subsistenceDataX,this.dataCity,this.dataVillage)
        }
    },
    created:function () {
        this.$emit('header', true);
        
    },
    mounted(){
        this.getData()
    },
    
}
</script>

<style lang="less" scoped>
.home {
    height: 2380px;
    background-color: #F1F9FD;

    .statistics {
        width: 92%;
        height: 445px;
        margin: 0 auto;
        // background-color: #fff005;

        .all-statistics {
            border-radius: 4px;
            margin-top: 0.9%;
            width: 26%;
            height: 425px;
            background-color: #fff;

            .collect {
                width: 92%;
                margin: 0 auto;
                height: 357px;
                // background-color: brown;

                .day-collect {
                    border-radius: 4px;
                    margin-top: 13px;
                    width: 100%;
                    height: 77px;
                    background:linear-gradient(to right,#516CFF,#9996FF)
                }

                .week-collect {
                    border-radius: 4px;
                    margin-top: 13px;
                    width: 100%;
                    height: 77px;
                    background:linear-gradient(to right,#36AF8C ,#28DCE1)
                }
                
                .month-collect {
                    border-radius: 4px;
                    margin-top: 13px;
                    width: 100%;
                    height: 77px;
                    background:-webkit-linear-gradient(left, #BC9825, #F6DD3E);
                }
               
                .year-collect {
                    border-radius: 4px;
                    margin-top: 13px;
                    width: 100%;
                    height: 77px;
                    background:-webkit-linear-gradient(left, #59AC26, #4AC68A);
                }
            }
        }

        .volume-statistics {
            border-radius: 4px;
            margin-top: 0.9%;
            width: 72.1%;
            height: 425px;
            margin-left: 10px;
            background-color: #ffffff;
        }
    }

    .cpi-ppi {
        width: 92%;
        height: 450px;
        margin: 0 auto;
        // background-color: #F6DD3E;

        .cpi {
            border-radius: 4px;
            margin-top: 25px;
            width: 49.3%;
            background-color: #ffffff;
        }

        .ppi {
            border-radius: 4px;
            margin-top: 25px;
            width: 49.3%;
            background-color: #ffffff;
        }
    }

    .countryWage {
        width: 92%;
        height: 450px;
        margin: 0 auto;
        // background-color: #F6DD3E;

        .countryWageChart {
            border-radius: 4px;
            margin-top: 25px;
            width: 100%;
            background-color: #ffffff;
        }
    }

    .subsistence {
        width: 92%;
        height: 450px;
        margin: 0 auto;
        // background-color: #F6DD3E;

        .subsistenceChart {
            border-radius: 4px;
            margin-top: 25px;
            width: 100%;
            background-color: #ffffff;
        }
    }

    .otherType {
        width: 92%;
        height: 450px;
        margin: 0 auto;
        // background-color: #F6DD3E;

        .other1 {
            border-radius: 4px;
            margin-top: 25px;
            width: 49.3%;
            background-color: #ffffff;
        }

        .other2 {
            border-radius: 4px;
            margin-top: 25px;
            width: 49.3%;
            background-color: #ffffff;
        }

    }
}

</style>